articles

Home / DeveloperSection / Articles / Fetch values from database with Ajax

Fetch values from database with Ajax

chandu kumar 7938 09-Nov-2012
   Aspx Page
   <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
   /TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
  <linkrel="shortcut icon"href="favicon.ico"/>
<linkrel="Stylesheet"type="text/css"href="page.css"/>
<scripttype="text/javascript"src="jquery-1.8.0.js"></script>
<scripttype='text/javascript'src='http://ajax.googleapis.com/ajax/libs/jquery
  /1.4.2/jquery.min.js?ver=3.0.1'></script>   
<scripttype='text/javascript'src='js/infinite-rotator.js'></script>            
  <linkrel="stylesheet"href="css/style.css"type="text/css"media="screen"/>
  <linkrel="Stylesheet"href="styl.css"type="text/css"media="screen"/>
  <styletype="text/css">
  .style1
  {
width: 100%;
  height: 51px;
  margin-left: 1px;
  }
  .accordion-header, .accordion-selected {
  width: 390px;
  background-color:#6EA538;
  margin-bottom:2px;
  padding:2px;
  color:#F6FFD5;
  font-weight:bold;
  cursor:pointer;
  }
.accordion-content {
  width:390px;
margin-bottom:2px;
  padding:2px;
}
  .accordion-selected, .accordion-content {
  border:solid2px#666666;
  }
.style2
{
width: 100%;
  height: 141px;
  margin-top: 0px;
  }
  .style3
  {
  width: 100%;
  margin-top: 0px;
  }
  .style4
  {
  }
  .style5
  {
  font-weight: normal;
  font-size: x-large;
}
  #wrapper
  {
height: 316px;
  width: 1177px;
  }
.style6
  {
  color: #99CC00;
width: 680px;
  height: 38px;
  font-weight: normal;
font-size: x-large;
  }
.style8
  {
color: #99CC00;
  width: 105px;
  height: 38px;
  }
  .style9
  {
  height: 38px;
  }
  .style10
  {
  color: #FFFFFF;
  }
  </style>
  </head>
  <bodyclass="b"  >
  <formid="form1"runat="server">
  <divclass="b">
  <asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager>
  <spanclass="style5"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<tableclass="a"style="margin-top: -12px";>
  <tr>
<tdstyle="margin-left: 5px"; class="style9">
</td>
<tdclass="style8">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<tdclass="style6">
<strong>&nbsp;<asp:LabelID="Label1"runat="server"Font-Size="14pt"
ForeColor="White"style="font-size: x-large"></asp:Label>
<spanclass="style10">
<br/>
</span></strong></td>
</tr>
</table>
</strong></span>&nbsp;<asp:PanelID="Panel1"runat="server"Height="1240px"
Width="1271px">
<asp:PanelID="Panel2"runat="server"Height="1222px"style="margin-left: 79px; margin-bottom: 0px;"
Width="1188px">
<tableclass="style1"bgcolor="White">
<tr>
<tdalign="center">
<divid="tabs">
<ul>
<listyle="width: 100px; height: 50px"><ahref="Home.aspx"><span>Home</span></a></li>
<li><ahref="Aboutus.aspx"><span>About Us</span></a></li>
<li><ahref="Ourproductcat.aspx"><span>Our Product</span></a></li>
<li><ahref="Ourcustomer.aspx"><span>Our Customer</span></a></li>
<li><ahref="Enquiry.aspx"><span>Send Enquiry</span></a></li>
<li><ahref="Contactus.aspx"><span>Contact Us</span></a></li>
</ul>
</div>
<tableclass="style2"border="1"bgcolor="#669900"style="border-style: solid">
<tr>
<td>
<imgsrc="image/top_top.png"width="1180px"alt=""/>
<tableclass="style3"bgcolor="White">
<tr>
<td bgcolor="White">
<divID="rotating-item-wrapper">
<imgsrc="images/furniture.jpg" alt="photo of building across from our office"
class="rotating-item"width="850"height="140"/>
<imgsrc="images/household.jpg" alt="building entrance with neon backlit walls"
class="rotating-item"width="850"height="140"/>
<imgsrc="images/3.png"alt="building lobby window reflections"class="rotating-item"
width="850"height="140"/>
<pstyle="display:none;">
Source code and instructions at:
<ahref="http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/">
Infinite Loop: Rotating Images Using jQuery (JavaScript)</a><br/>by
<ahref="http://trendmedia.com/">San Francisco WordPress website designers and
developers - TrendMedia</a></p>
</div>
</td>
</tr>
</table>
<imgsrc="image/top_bot.png"width="1180px"alt=""/>
</td>
</tr>
<caption>
</caption>
</table>
</td>
</tr>
</table>
<divstyle="width: 1188px; height: 1027px">
<divstyle="width: 782px; height: 1026px; left: 500px; margin-left: 407px;">
<asp:ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:PanelID="Panel3"runat="server"ScrollBars="Vertical"
style="font-size: small">
</asp:Panel>
<cc1:RoundedCornersExtenderID="Panel3_RoundedCornersExtender"runat="server"
BorderColor="AppWorkspace"Color="AppWorkspace"Enabled="True"
TargetControlID="Panel3"></cc1:RoundedCornersExtender>
</asp:ContentPlaceHolder>
</div>
<tablestyle="width: 390px; height: 56px; margin-top: -1040px">
<tr>
<asp:PanelID="Panel7"runat="server">
<td>
<cc1:AccordionID="Accordion1"runat="server" TransitionDuration="100" 
SelectedIndex="0" FramesPerSecond="100"FadeTransitions="true"RequireOpenedPane="true"
OnItemDataBound="Accordion1_ItemDataBound"
ContentCssClass="accordion-content" HeaderCssClass="accordion-header"
HeaderSelectedCssClass="accordion-selected"><HeaderTemplate><%#DataBinder.Eval(Container.DataItem,
"category_name")%></HeaderTemplate><ContentTemplate><asp:HiddenFieldID="txt_categoryID"
runat="server"Value='<%#DataBinder.Eval(Container.DataItem,"id") %>'/><asp:GridView
ID="GridView1"runat="server" RowStyle-BackColor=#214200RowStyle-HorizontalAlign="Left"
AutoGenerateColumns="false" GridLines="Both"
Width="390px"><Columns><asp:TemplateField HeaderStyle-HorizontalAlign="Left"
HeaderStyle-ForeColor="#EBF7F1"><ItemTemplate><imgsrc="download.jpg"
alt="Image"height="15px"width="15px"onclick="go"/><asp:LinkButton
ID="lb1" Font-Underline="false"CausesValidation="false"  ForeColor="#F6FFD5"
Text='<%#DataBinder.Eval(Container.DataItem,"category_name") %>'runat="server"
PostBackUrl='<%#"~/ourproducts.aspx?Name="+Eval("category_name") %>'/>
</ItemTemplate></asp:TemplateField></Columns></asp:GridView>
</ContentTemplate></cc1:Accordion>
</td>
</asp:Panel>
</tr>
</table>
</div>
</asp:Panel>
<cc1:RoundedCornersExtenderID="Panel7_RoundedCornersExtender"runat="server"
BorderColor="AppWorkspace"Color="AppWorkspace"Corners="All"Enabled="True"
TargetControlID="Panel7">
</cc1:RoundedCornersExtender>
<cc1:RoundedCornersExtenderID="Panel2_RoundedCornersExtender"runat="server"
BorderColor="AppWorkspace"Color="AppWorkspace"Enabled="True"Radius="3"
TargetControlID="Panel2"></cc1:RoundedCornersExtender>
<div style="margin-top: 0px; width:100%; position:static; height: 179px;">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
NavigateUrl="http://www.hunchsoft.co.in" style="color: #FFFFFF">Hunch Software Pvt. Ltd.</asp:HyperLink>
</div>
</td>
</tr>
</table>
</asp:Panel>
<cc1:RoundedCornersExtender ID="Panel6_RoundedCornersExtender" runat="server"
BorderColor="AppWorkspace" Color="AppWorkspace" Enabled="True" Radius="1"
TargetControlID="Panel6">
</cc1:RoundedCornersExtender>
</asp:ContentPlaceHolder>
</div>
</asp:Panel>
<cc1:RoundedCornersExtender ID="Panel1_RoundedCornersExtender" runat="server"
BorderColor="ActiveCaptionText" Color="ActiveCaptionText" Enabled="True"
Radius="5" TargetControlID="Panel1">
</cc1:RoundedCornersExtender>
</div>
</form>
</body>
</html>
.cs File
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using MySql.Data.MySqlClient;
using System.Data;
using System.Configuration;
public partial class MasterPage : System.Web.UI.MasterPage
{
MySqlConnection sqlConn = new MySqlConnection
(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
bind();
company_bind();
int? x = null;
if (x.HasValue)
{
}
}
}
public void company_bind()
{
MySqlDataAdapter cmd = new MySqlDataAdapter("select * from packpouch.company_info",sqlConn);
DataTable tb = new DataTable();
cmd.Fill(tb);
Label1.Text = tb.Rows[0][0].ToString();
Label2.Text = tb.Rows[0][1].ToString();
Label3.Text = tb.Rows[0][2].ToString();
Label4.Text = tb.Rows[0][3].ToString();
Label5.Text = tb.Rows[0][4].ToString();
Label6.Text = tb.Rows[0][5].ToString();
Label7.Text = tb.Rows[0][6].ToString();
Label8.Text = tb.Rows[0][7].ToString();
Label9.Text = tb.Rows[0][8].ToString();
Label10.Text = tb.Rows[0][9].ToString();
Label11.Text = tb.Rows[0][10].ToString();
Label12.Text = tb.Rows[0][11].ToString();
Label13.Text = tb.Rows[0][12].ToString();
Label14.Text = tb.Rows[0][13].ToString();
}
public void bind()
{
//string p= Accordion1.Panes.ToString();
string p= Accordion1.SelectedIndex.ToString();
MySqlCommand sqlSelect = newMySqlCommand("SELECT * FROM category where parentid=0", sqlConn);
sqlSelect.CommandType = System.Data.CommandType.Text;
MySqlDataAdapter sqlAdapter = newMySqlDataAdapter(sqlSelect);
DataSet myDataset = newDataSet();
sqlAdapter.Fill(myDataset);
Accordion1.DataSource = myDataset.Tables[0].DefaultView;
Accordion1.DataBind();
}
protectedvoid Accordion1_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
{
// int p = 1;
if (e.ItemType == AjaxControlToolkit.AccordionItemType.Content)
{
//p = Accordion1.SelectedIndex;
// int pp= Accordion1.TabIndex;
HiddenField x= (HiddenField)e.AccordionItem.FindControl("txt_categoryID");
string p= x.ToString();
string xx = e.Item.ToString();
// MySqlConnection sqlConn = new MySqlConnection("Server=packpouch.db.7649735.hostedresource.com;
Database=packpouch;uid=packpouch;pwd=Hunch@123");
sqlConn.Open();
MySqlCommand sqlSelect = newMySqlCommand("SELECT category_name FROM category where parentid = " +
((HiddenField)e.AccordionItem.FindControl("txt_categoryID")).Value + "",sqlConn);
 sqlSelect.CommandType = System.Data.CommandType.Text;
 MySqlDataAdapter sqlAdapter = newMySqlDataAdapter(sqlSelect);
 DataSet myDataset = newDataSet();
 sqlAdapter.Fill(myDataset);
 sqlConn.Close();
 GridView grd = newGridView();
 grd = (GridView)e.AccordionItem.FindControl("GridView1");
 grd.DataSource = myDataset;
 grd.DataBind();
 }
 }
Database:

Fetch values from database with Ajax

  

Fetch values from database with Ajax



Updated 07-Sep-2019
I am .Net Developer in Hunch Software since May to till

Leave Comment

Comments

Liked By